<template>
  <div class="song_contaner padd100">
    <el-row :gutter="20">
      <el-col :lg="20" style="margin-bottom:20px">
        <div class="song_warpper">
          <div class="left_song_img">
            <img :src="album.picUrl + '?param=260y260'" alt="">
          </div>
          <div class="right_song_info">
            <div class="song_title">
              <el-tag>专辑</el-tag>
              <h1>{{album.name}}</h1>
            </div>
            <div class="song_desc">
              <div class="song_desc_item">
                <span>歌手：</span>
                <div v-for="(item,i) in album.artists" :key="item.id">
                  <span v-if="i !== 0" style="margin:0 4px"> / </span>
                  <el-link type="primary" @click="()=>{  router.push({ name: 'artist-detail',params: {id:item.id}})}">
                    {{item.name}} </el-link>
                </div>
              </div>
              <div class="song_desc_item">
                <span>发行时间：</span>
                <span>{{dayjs(album.publishTime).format('YYYY-MM-DD')}}</span>
              </div>
              <div class="song_desc_item" v-if="album.company">
                <span>发行公司：</span>
                <span>{{album.company}}</span>
              </div>
            </div>
            <div class="r_m_opea">
              <el-button type="primary" :icon="VideoPlay" @click="play">播放</el-button>
              <el-button type="primary" :icon="Plus" @click="addPlayList">添加到播放列表</el-button>
              <el-button type="primary" :icon="FolderAdd" @click="openCollectionModal(id)">收藏</el-button>
              <el-button :icon="Comment" @click="handleClickScrollToComment">评论 <span v-if="album.info.commentCount>0">
                  ({{album.info.commentCount}})</span>
              </el-button>
            </div>
          </div>
        </div>
        <div class="album_desc">
          <div class="indent_desc">专辑介绍：</div>
          <div class="desc_content">
            {{album.description}}
          </div>
        </div>
        <div class="list_table_wrapper">
          <div class="top_b_m_tit">
            <div class="left_tit">
              <div>包含歌曲列表</div>
              <span>{{songs.length?songs.length:0}}首歌</span>
            </div>
          </div>
        </div>
        <div>
          <MusicTable :tracks="songs" />
        </div>
        <div class="comment_wrapper" id="comment">
          <div class="top_b_m_tit" style="margin-top:50px">
            <div class="left_tit">
              <div>评论</div>
              <span>共{{album.info.commentCount}}条评论</span>
            </div>
          </div>
          <div>
            <CommentComponent :id="Number(id)" @getTotal="getTotal" :playlistLimit="20" :pageNum="pageNum"
              :isActiveId="false" :commentType="3" />
          </div>
          <div class="pageination_center" style="margin-top:40px">
            <el-pagination background layout="prev, pager, next" :total="total" v-show="total > 0"
              v-model:currentPage="pageNum" :page-size="20" @current-change="handleCurrentChange" />
          </div>
        </div>
      </el-col>
      <el-col :lg="4">
        <div class="right_other_container">
          <!--  -->
          <div class="have_music_list">
            <div class="ohter_title">
              <span>Ta的其他热门专辑</span>
              <el-button link @click="handleClickToArtistDetail">全部 &gt;</el-button>
            </div>
            <div class="music_item" v-for="item in hotAlbums" :key="item.id">
              <div class="left_img cursor_class" @click="handleClickRelatedItem(item.id)">
                <img :src="item.picUrl + '?param=50y50'" alt="">
              </div>
              <div class="right_info">
                <div class="top_title cursor_class text_ellipsis text_decoration"
                  @click="handleClickRelatedItem(item.id)">{{item.name}}</div>
                <div class="bottom_time  text_ellipsis">
                  {{dayjs(item.publishTime).format('YYYY-MM-DD')}}
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="like_music_list">
            <div class="ohter_title">
              喜欢这张专辑的人
            </div>
            <div class="like_music_item">
              <div class="like_user_avatar cursor_class" v-for="item in 15" :key="item">
                <img src="http://p1.music.126.net/6oO7ZeMV90bym3gX9hlJqw==/109951167223602792.jpg?param=45y45" alt="">
              </div>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
  <Collection ref="collectionRef" />
  <!-- 登录注册弹窗 -->
  <LoginAndRegister ref="loginAndRegisterRef" />
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from "vue"
import { Headset, Plus, Timer, VideoPlay, Comment, FolderAdd, Pointer, PriceTag, House, Sunny, Guide, MostlyCloudy } from '@element-plus/icons-vue'
import CommentComponent from "@/components/Comment/index"
import router from '@/router';
import { useRoute } from "vue-router";
import { getAlbumDetail, getAlbumDynamic } from "@/api/album";
import { getArtistAlbum } from "@/api/artist";
import { ElMessage } from 'element-plus'
import Collection from "@/components/Collection/index"
import { collectionTypeRef } from "@/types/collection";
import MusicTable from "@/components/MusicTable";
import LoginAndRegister from '@/components/LoginAndRegister/index'
import { loginAndRegisterTypeRef } from "@/types/login";
import dayjs from "dayjs";
import { useStore } from "vuex";
const store = useStore();
const loginAndRegisterRef = ref<loginAndRegisterTypeRef | null>()
const route = useRoute()
// 路由参数
let id = route.params.id
const total = ref(0)
const pageNum = ref(1)
const collectionRef = ref<collectionTypeRef | null>(null)
// 详情信息
const detailAlbumData = reactive<any>({
  // 专辑信息
  album: { info: {} },
  // 歌曲
  songs: [{ ar: [] }]
})
// 热门专辑
const hotAlbumsData = reactive<any>({
  hotAlbums: [{}]
})
const { album, songs } = toRefs(detailAlbumData)
const { hotAlbums } = toRefs(hotAlbumsData)
const handleCurrentChange = (val: number) => {
  pageNum.value = val
}
const getTotal = (val: number) => {
  total.value = val
}
// 获取详情信息
const getAlbumDetailData = async (id: number | string | Array<string>) => {
  const res: any = await getAlbumDetail({ id })
  detailAlbumData.album = res.album
  detailAlbumData.songs = res.songs
  getArtistAlbumData()
}
// 查看歌手全部专辑
const handleClickToArtistDetail = () => {
  router.push({
    name: 'artist-detail',
    params: {
      id: detailAlbumData.album.artist.id
    },
    query: {
      tab: 'album'
    }
  })
}
// 获取歌手的热门专辑
const getArtistAlbumData = async () => {
  const res: any = await getArtistAlbum({ id: detailAlbumData.album.artist.id, limit: 5 })
  hotAlbumsData.hotAlbums = res.hotAlbums
}
// 专辑动态信息
// 传入专辑 id, 可获得专辑动态信息,如是否收藏,收藏数,评论数,分享数
const getAlbumDyNamicData = async (id: number | string | Array<string>) => {
  const res: any = await getAlbumDynamic({ id })
}
// 点击评论跳转指定位置
const handleClickScrollToComment = () => {
  document.getElementById('comment')?.scrollIntoView()
}
// 热门专辑点击事件
const handleClickRelatedItem = (id: string) => {
  router.push({
    name: 'album-detail',
    params: {
      id
    }
  })
}
// 打开收藏组件
const openCollectionModal = (id: number) => {
  let cookie = localStorage.getItem('cookie')
  if (cookie) {
    if (collectionRef.value) {
      let arrId: string[] = []
      if (detailAlbumData.songs) {
        detailAlbumData.songs.forEach((item: { id: string; }) => {
          arrId.push(item.id)
        })
      }
      collectionRef.value.id = arrId.toString()
      collectionRef.value.isSongSheet = false
      collectionRef.value.dialogVisible = true
      collectionRef.value.init()
    }
  } else {
    if (loginAndRegisterRef.value) {
      console.log(loginAndRegisterRef.value.loginVisible);
      loginAndRegisterRef.value.loginVisible = true
      loginAndRegisterRef.value.getQrKeyData()
    }
  }
}
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  console.log('路由变化了哦');
  // location.reload()
  id = route.params.id
  if (id && router.currentRoute.value.name === 'album-detail') {
    getAlbumDetailData(id)
    getAlbumDyNamicData(id)
  }
})
// 播放
const play = () => {
  let list = filterMusicData()
  store.dispatch('playAll', { list });
}
// 添加到播放列表
const addPlayList = () => {
  let list = filterMusicData()
  store.dispatch('addList', { list });
}
// 把需要vip 或者音源不可用的过滤出去
const filterMusicData = (): any[] => {
  let list = songs.value.filter((item: any)=>{
    return item.fee != 1
  })
  return list
}
if (id) {
  getAlbumDetailData(id)
  getAlbumDyNamicData(id)
} else {
  ElMessage({
    message: "参数错误",
    type: 'error',
    duration: 2000,
    onClose: () => {
      history.go(-1)
    }
  })
}
</script>
<style lang="scss" scoped>
.song_contaner {
  margin-top: 20px;

  .song_warpper {
    display: flex;

    .left_song_img {
      width: 260px;
      height: 260px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .right_song_info {
      padding-left: 40px;
      flex: 1;

      .song_title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        h1 {
          margin: 0;
          font-size: 24px;
          color: #333;
          margin-left: 14px;
        }
      }

      .song_desc {
        .song_desc_item {
          margin: 15px 0px;
          font-size: 12px;
          display: flex;
          align-items: center;

          span {
            margin-right: 4px;
            color: rgb(153, 153, 153);
          }
        }
      }

      .list_tag {
        margin-top: 14px;

        .text {
          font-weight: 700;
          color: #666;
          font-size: 12px;
        }
      }

      .r_m_opea {
        margin-top: 20px;

        button {
          margin-bottom: 10px;
          margin-left: 0;
          margin-right: 10px;
        }
      }
    }
  }

  .list_table_wrapper {
    margin-top: 40px;

    .top_b_m_tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #409eff;
      padding-bottom: 10px;

      .left_tit {
        color: #333;
        font-size: 20px;
        display: flex;

        span {
          color: #666;
          font-size: 12px;
          margin-top: 10px;
          margin-left: 14px;
        }
      }

      .right_play_count {
        span {
          color: #666;
          font-size: 12px;

          span {
            color: #409eff;
            font-weight: 700;
          }
        }
      }
    }
  }

  .album_desc {
    margin-top: 30px;

    .indent_desc {
      font-size: 12px;
      color: #333;
      font-weight: 700;
    }

    .desc_content {
      color: #666;
      line-height: 2;
      font-size: 12px;
    }
  }

  .comment_wrapper {
    .top_b_m_tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #409eff;
      padding-bottom: 10px;

      .left_tit {
        color: #333;
        font-size: 20px;
        display: flex;

        span {
          color: #666;
          font-size: 12px;
          margin-top: 10px;
          margin-left: 14px;
        }
      }
    }
  }

  .right_other_container {
    .have_music_list {
      .music_item {
        display: flex;
        margin: 14px 0;

        .left_img {
          width: 50px;
          height: 50px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .right_info {
          padding: 4px 0;
          padding-left: 10px;
          flex: 1;
          overflow: hidden;

          .top_title {
            font-size: 14px;
            margin-bottom: 10px;
          }

          .bottom_time {
            font-size: 12px;
            color: #333;
          }
        }
      }
    }

    .like_music_list {
      margin-top: 40px;

      .like_music_item {
        display: flex;
        flex-wrap: wrap;

        .like_user_avatar {
          width: 45px;
          height: 45px;
          margin: 8px;
          margin-left: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }

    .ohter_title {
      font-weight: 700;
      font-size: 12px;
      color: #333;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
